	import { checkLogin } from './auth.js'
	new Vue({
		el: '#app',
		data: {
			categoryVoList: [],
			firstCategoryList: [],
			secondCategoryList: [],
			nowSecondCategoryList: [],
			nowSecondCategoryIndex: -1,
			bannerList: [],
			activeBannerImage: 0,
			newProducts: [],
			hotSaleProducts: [],
			IS_LOGIN: null, // 是否登录,若已登录则保存用户信息,未登录为null
			searchKey: '' // 搜索的关键词
		},
		async created() {
			this.IS_LOGIN = await checkLogin()
		},
		async mounted() {
			await this.getList();

			this.$nextTick(async () => {
				await this.getBannerList();
				this.getNewProducts();
				this.getHotSaleProducts();
			})
		},
		watch: {
			firstCategoryList: {
				deep: true,
				immdiate: true, //立即执行handler函数
				handler(newValue) {
					console.log('newValue', newValue)
					setTimeout(() => {
						this.initMenu();
					}, 300)
				}
			}
		},
		methods: {
			gotoProduct(itemId) {
				console.log(itemId);
				location.href = `/web/product.html?productId=${itemId}`
			},
			// 查找商品
			searchProduct(){
				console.log('查找商品:');
				location.href = `../web/search.html?searchKey=${this.searchKey}`
			},
			// 退出登录
			logout() {
				localStorage.removeItem('token')
				this.IS_LOGIN = null
				this.$message.success('退出成功')
			},
			async getHotSaleProducts() {
				const res = await axios.get('/product/getHotSaleProducts')
				this.hotSaleProducts = res.data.data
				console.log(this.hotSaleProducts)
			},
			async getNewProducts() {
				const res = await axios.get('/product/getNewsProducts')
				this.newProducts = res.data.data
			},
			async getList() {
				const res = await axios.get('/category/showCategory')
				this.categoryVoList = res.data.data;
				this.typelist = this.categoryVoList.firstCategoryList;
				this.firstCategoryList = this.categoryVoList.firstCategoryList;
				this.secondCategoryList = this.categoryVoList.secondCategoryList;
				console.log(this.categoryVoList);
			},
			// 获得banner图片
			async getBannerList() {
				const res = await axios.get('/banner/getBannerList')
				this.bannerList = res.data.data;
			},
			initMenu() {
				//根据轮播图片的高，导航的高
				//获得轮播图高
				let lunh = $("#myCarousel").height();
				let lih = (lunh - 10) / 19;
				//确定导航高度
				$(".index-menu li").css("height", lih + "px")
				//确定按钮位置	
				let btnt = Math.floor($("#myCarousel").height() / 2 - 30);
				$(".left").css("margin-top", btnt + "px");
				$(".right").css("margin-top", btnt + "px");
				/*左侧分类一级菜单控制二级菜单显示和隐藏*/
				$(".index-menu").hover(function () {
					$("#showIndex").show();
				}, function () {
					$("#showIndex").hide();
				})

				/*二级菜单自己控制显示和隐藏*/
				$("#showIndex").hover(function () {
					$("#showIndex").show();
				}, function () {
					$("#showIndex").hide();
				})

			},
			// 展示二级分类
			showSecondMenu(index) {
				/*一级分类项li鼠标移入移出*/
				let offTop = -100;
				let offLeft = 0;
				$(".index-menu li").hover(function () {
					offLeft = $(this).width() + $(this).offset().left;
					offTop = $(this).offset().top;
					$("#showIndex").css("top", offTop - 2 + "px")
					$("#showIndex").css("left", offLeft - 1 + "px")
					$(this).css("background-color", "#f5f5f5");
					$(this).css("color", "#4288c3");
				}, function () {
					$(this).css("background-color", "");
					$(this).css("color", "");
				})
				this.nowSecondCategoryList = this.secondCategoryList[index];
			},
			showThirdMenu(index) {
				/*二级分类项li鼠标移入移出*/
				$(".second-menu-li").live("mouseover", function () {
					$(".second-menu-li").live("mouseout", function () {
						$(this).css("background-color", "");
						$(this).css("color", "");
					})
					/*三级分类项li鼠标移入移出*/
					$(".third-menu-li").live("mouseover", function () {
						$(this).css("background-color", "#dddddd");
						$(this).css("color", "#000000");
					})
					$(".third-menu-li").live("mouseout", function () {
						$(this).css("background-color", "");
						$(this).css("color", "");
					})
				})
			}
		}
	})